<template>
  <div>
    <el-dialog
      title="远程控制"
      :visible="visible"
      width="30%"
      :append-to-body="true"
      @close="close"
      @open="isOpen"
    >
      <div>
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="140px"
          :inline="false"
          size="small"
        >
          <el-card
            shadow="always"
            :body-style="{ padding: '20px' }"
            style="margin-top: 10px"
          >
            <div slot="header">
              <span>系统控制模式切换</span>
            </div>

            <el-form-item label="控制模式:">
              {{ form.systemControlMode ? "远程" : "本地" }}
            </el-form-item>
            <div class="w100 flex-x flex-right">
              <el-button
                :loading="isloading"
                type="primary"
                size="small"
                :disabled="form.systemControlMode"
                @click="changeControlMode(1)"
                >远 程</el-button
              >
              <el-button
                :loading="isloading"
                type="primary"
                size="small"
                :disabled="!form.systemControlMode"
                @click="changeControlMode(0)"
                >本 地</el-button
              >
            </div>
          </el-card>
          <el-card shadow="always" :body-style="{ padding: '20px' }">
            <div slot="header">
              <span>空炉加热</span>
            </div>

            <el-form-item label="设定温度:">
              <el-input
                v-model="form.setHeartTemp"
                style="width: 70%"
                placeholder="请输入设定温度"
                disabled
                size="small"
              >
                <template slot="append">℃</template>
              </el-input>
              <el-button
                :loading="isloading"
                size="small"
                style="margin-left: 10px"
                @click="openSetDialog"
                >设定</el-button
              >
            </el-form-item>
            <!-- <el-form-item label="设定时间:">
            <el-input placeholder="请输入设定时间" v-model="form.name2">
              <template slot="append">min</template>
            </el-input>
          </el-form-item> -->
            <div class="w100 flex-x flex-right">
              <el-button
                :loading="isloading"
                type="primary"
                size="small"
                :disabled="!form.systemControlMode || area123.value === 101"
                @click="changeControlTemp(1)"
                >加热启动</el-button
              >
              <el-button
                :loading="isloading"
                type="primary"
                size="small"
                :disabled="!form.systemControlMode || area123.value == 102"
                @click="changeControlTemp(0)"
                >停止</el-button
              >
            </div>
          </el-card>
        </el-form>
        <el-dialog
          :append-to-body="true"
          :close-on-click-modal="false"
          title="温度设置"
          :visible="setTempDialog"
          width="30%"
          @close="setTempDialog = false"
        >
          <div>
            设定温度：
            <el-input
              v-model="newTemp"
              style="width: 60%"
              placeholder="请输入设定温度"
              size="small"
            >
              <template slot="append">℃</template>
            </el-input>
          </div>
          <span slot="footer">
            <el-button
              :loading="isloading"
              size="small"
              type="primary"
              @click="setTemp"
              >确 定</el-button
            >
            <el-button
              :loading="isloading"
              size="small"
              @click="setTempDialog = false"
              >关 闭</el-button
            >
          </span>
        </el-dialog>
      </div>
      <span slot="footer">
        <el-button size="small" @click="close">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { controlModeDown } from "@/api/deviceOperation";
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["area123", "controlDeviceInfo"]),
    // 设备toekn
    deviceToken() {
      return this.controlDeviceInfo.token;
    },
    // 分配token
    assignmentToken() {
      return this.controlDeviceInfo.assignmentToken;
    },
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      rules: {},
      form: {
        systemControlMode: 1,
        setHeartTemp: null,
        startControlTemp: null,
      },
      setTempDialog: false,
      newTemp: "",
      isloading: false,
    };
  },
  methods: {
    isOpen() {
      this.form.setHeartTemp = this.area123.setTemp;
      this.form.systemControlMode = Number(this.area123.systemControlMode);
    },
    // 控制启动模式远程:本地
    changeControlMode(e) {
      const params = {
        tagName: "systemControlMode",
        value: e,
        deviceToken: this.deviceToken,
      };
      this.isloading = true;
      controlModeDown(params).then((res) => {
        this.isloading = false;
        if (res.data.code === "200") {
          this.form.systemControlMode = e;
          this.$message({
            type: "success",
            message: `控制模式切换成功`,
          });
        } else {
          this.$message({
            type: "warnning",
            message: res.data.msg,
          });
        }
      });
    },
    // 设定温度启动和停止
    async changeControlTemp(e) {
      this.$confirm(`确定要${e ? "启动" : "停止"}加热吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        const params = {
          tagName: "startControlTemp",
          value: e,
          deviceToken: this.deviceToken,
        };
        this.isloading = true;
        controlModeDown(params).then((res) => {
          this.isloading = false;
          if (res.data.code === "200") {
            this.form.startControlTemp = e;
            this.$message({
              type: "success",
              message: `加热${e ? "启动" : "停止"}成功`,
            });
          } else {
            this.$message({
              type: "warnning",
              message: res.data.msg,
            });
          }
        });
      });
    },
    close() {
      this.form = {
        systemControlMode: 1,
        setHeartTemp: null,
        startControlTemp: null,
      };
      this.$emit("update:visible", false);
    },
    openSetDialog() {
      this.setTempDialog = true;
      this.newTemp = null;
    },
    setTemp() {
      const params = {
        tagName: "setHeartTemp",
        value: this.newTemp,
        deviceToken: this.deviceToken,
      };
      this.isloading = true;
      controlModeDown(params).then((res) => {
        this.isloading = false;
        if (res.data.code === "200") {
          this.setTempDialog = false;
          this.form.setHeartTemp = this.newTemp;
          this.$message({
            type: "success",
            message: `温度设定成功`,
          });
        } else {
          this.$message({
            type: "warnning",
            message: res.data.msg,
          });
        }
      });
    },
    controlModeDown(tagName, value) {
      const params = {
        tagName: tagName,
        value: value,
        deviceToken: this.deviceToken,
      };
      controlModeDown(params).then((res) => {
        console.log("res", res);
        return res;
      });
    },
  },
};
</script>

<style></style>
